<!--
 * @Description:
 * @Author: william
 * @Date: 2024-06-20 16:17:09
 * @LastEditors: william
 * @LastEditTime: 2025-04-15 10:44:55
-->
<template>
  <BaseDialog
    v-model="dialogVisible"
    :title="$t('msgQueue.messageDetails')"
    min-width="600px"
    width="50%"
    :before-close="handleClose"
    class="detail-dialog"
  >
    <el-descriptions
      v-loading="viewLoading"
      :column="1"
      border
      :label-width="140"
    >
      <el-descriptions-item width="200">
        <template #label>{{ $t('msgQueue.announcementTitle') }}</template>
        {{ row.title || '--' }}
      </el-descriptions-item>
      <el-descriptions-item width="200">
        <template #label>{{ $t('msgQueue.messageContent') }}</template>
        {{ row.content || '--' }}
      </el-descriptions-item>
      <el-descriptions-item width="200">
        <template #label>{{ $t('public.createTime') }}</template>
        {{ row.createTime || '--' }}
      </el-descriptions-item>
      <el-descriptions-item width="200">
        <template #label>{{ $t('public.status') }}</template>
        {{ row.status === 2 ? $t('msgQueue.read') : $t('msgQueue.unread') }}
      </el-descriptions-item>
    </el-descriptions>
    <template #footer>
      <el-button @click="handleClose" style="margin-top: 10px">{{
        $t('public.close')
      }}</el-button>
    </template>
  </BaseDialog>
</template>

<script setup>
defineProps({
  row: {
    type: Object,
    default: () => {}
  }
})

const dialogVisible = defineModel({
  type: Boolean,
  default: false
})

const handleClose = _ => {
  dialogVisible.value = false
}
</script>
